import React, { useEffect } from "react";
import * as echarts from 'echarts';

const Echartsfour: React.FC = () => {
    useEffect(() => {
        const chartDom = document.getElementById('chart-four')!;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '日常巡查 150项',
                left: '27%',
                top: '30%',
                textAlign: 'center',
                textVerticalAlign: 'middle',
                textStyle: {
                    color: '#fff',
                    fontSize: 7,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                right: '10%',
                top: 'center',
                orient: 'vertical',
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 4,
                textStyle: {
                    color: '#fff',
                    fontSize: 8,
                    rich: {
                        name: {
                            verticalAlign: 'middle'
                        }
                    }
                },
                data: ['日常巡查', '定期巡查', '专项巡查', '特别巡查', '其他']
            },
            series: [
                {
                    name: '巡查类型',
                    type: 'pie',
                    radius: ['35%', '55%'],
                    center: ['30%', '35%'],
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    data: [
                        { value: 50, name: '日常巡查', itemStyle: { color: '#2784ff' } },
                        { value: 40, name: '定期巡查', itemStyle: { color: '#05ffff' } },
                        { value: 30, name: '专项巡查', itemStyle: { color: '#68abff' } },
                        { value: 20, name: '特别巡查', itemStyle: { color: '#cee5fc' } },
                        { value: 10, name: '其他', itemStyle: { color: '#aad0fb' } }
                    ]
                }
            ]
        };
        myChart.setOption(option);

        const handleResize = () => {
            myChart.resize();
          };
          window.addEventListener('resize', handleResize);
    
          return () => {
            window.removeEventListener('resize', handleResize);
            myChart.dispose();
          };
    }, []);

    return (
        <div style={{ width: '100%', height: '100%', position: 'relative' }}>
            <p style={{ margin: 0}}>隐患来源分布</p>
            <div id="chart-four" style={{ width: '100%', height: 'calc(100% - 30px)' }}></div>
        </div>
    );
};

export default Echartsfour;